<template>
  <div>
    <van-nav-bar
        title="发布房源"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
  </div>

<!--  房源照片-->
  <div class="picture">
    <h3>房源图片</h3>
    <van-uploader :after-read="afterRead" preview-size="130"
    />
  </div>

<!--  租赁类型-->
  <div class="hire">
    <h3>租赁类型</h3>
    <van-checkbox-group v-model="rent.rentalType" shape="square" checked-color="black" class="fu">
      <div class="h11">
      <van-checkbox name="整租" class="s1">
        <p>整租</p>
      </van-checkbox>
      </div>

      <div class="h12">
      <van-checkbox name="合租" class="s2">
        <p>合租</p>
      </van-checkbox>
      </div>

      <div class="h13">
      <van-checkbox name="转租" class="s3">
          <p>转租</p>
      </van-checkbox>
      </div>
    </van-checkbox-group>
  </div>


<!--  房源两点-->
  <div class="light">
    <h3>房屋亮点</h3>
    <div class="one">
      <van-checkbox-group v-model="rent.houseStar" shape="square" checked-color="black" class="fu">

        <div class="h11">
          <van-checkbox name="独卫" class="s1">
            <p>独卫</p>
          </van-checkbox>
        </div>

        <div class="h12">
          <van-checkbox name="阳台" class="s2">
            <p>阳台</p>
          </van-checkbox>
        </div>

        <div class="h13">
          <van-checkbox name="飘窗" class="s3">
            <p>飘窗</p>
          </van-checkbox>
        </div>
      </van-checkbox-group>
    </div>

    <div class="two">
      <van-checkbox-group v-model="rent.houseStar" shape="square" checked-color="black" class="fu">

        <div class="h11">
          <van-checkbox name="精装" class="s1">
            <p>精装</p>
          </van-checkbox>
        </div>

        <div class="h12">
          <van-checkbox name="宠物" class="s2">
            <p>宠物</p>
          </van-checkbox>
        </div>
      </van-checkbox-group>
  </div>
  </div>

<!--  房源信息-->
  <div class="mes">
    <h3 class="h33">房源信息</h3>
    <van-cell title="位置" is-link class="custom-cell" size="large" @click="yhq"/>
    <van-cell title="房源楼层" is-link class="custom-cell" size="large" @click="jb"/>
    <van-cell title="房源户型" is-link class="custom-cell" size="large" @click="wm"/>
    <van-cell title="房屋面积" is-link class="custom-cell" size="large" @click="mj"/>
    <van-cell title="房源租金" is-link class="custom-cell" size="large" @click="zj"/>
    <van-cell title="付款方式" is-link class="custom-cell" size="large" @click="bad"/>
  </div>
<!--  参数选择-->
<!--  地址-->
  <van-popup v-model:show="show" position="bottom" :style="{ height: '25%', borderRadius: '0 0 15px 15px' }">
    <van-picker title="标题" :columns="columns"  @confirm="onConfirm"/>
  </van-popup>
<!--  楼层-->
  <van-popup v-model:show="showfo" position="bottom" :style="{ height: '25%', borderRadius: '0 0 15px 15px' }">
    <van-picker title="楼层" :columns="columsf" @confirm="onfl"/>
  </van-popup>
<!--  户型-->
  <van-popup v-model:show="showhx" position="bottom" :style="{ height: '25%', borderRadius: '0 0 15px 15px' }">
    <van-picker title="户型" :columns="columhx" @confirm="onhx"/>
  </van-popup>
<!--  面积-->
  <van-popup v-model:show="showmj" position="bottom" :style="{ height: '30%', borderRadius: '0 0 15px 15px' }">
    <van-field v-model="rent.houseArea" readonly clickable @touchstart.stop="showmj = true" class="mjxz"/>
    <van-number-keyboard
        v-model="rent.houseArea"
        :show="showmj"
        :maxlength="6"
        @blur="showmj = false"
    />
  </van-popup>
<!--  租金-->
  <van-popup v-model:show="showzj" position="bottom" :style="{ height: '30%', borderRadius: '0 0 15px 15px' }">
    <van-field v-model="rent.houseRent" readonly clickable @touchstart.stop="showzj = true"/>
    <van-number-keyboard
        v-model="rent.houseRent"
        :show="showzj"
        :maxlength="6"
        @blur="showzj = false"
    />
  </van-popup>
<!--  支付方式-->
  <van-popup v-model:show="good" position="bottom" :style="{ height: '25%', borderRadius: '0 0 15px 15px' }">
    <van-picker title="支付方式" :columns="columzf" @confirm="fine"/>
  </van-popup>





<!--  房源配套-->
  <div class="tao">
    <h3>房屋配套</h3>
    <div>
      <div>
        <van-row class="checkbox-row">
          <van-col
              v-for="(item, index) in checkboxes"
              :key="index"
              class="checkbox-col"
              @click="toggleCheckbox(index)"
          >
            <img
                class="custom-checkbox-icon"
                :src="item.checked ? activeIcon : inactiveIcon"
            />
            <p>床</p>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
<!--上传-->
  <div class="up" @click="pubilsh">
    <h3 class="jiji">发布房源</h3>
  </div>

</template>

<script setup>
import {post} from "../../util/request";

//d点击跳到发布界面
import {useRouter} from "vue-router";
const router = useRouter();
const iss = () => {
  router.push("/publish")
}
//发布
import {useStore} from '../../pinia/index.js'
const store=useStore()
const pubilsh = () => {
  console.log(rent.value)
  rent.value.userId=store.user.id
  post("my/publish",rent.value).then(r=>{
    iss()
    console.log(r.data)
  })

}
const good=ref(false)
const bad = () => {
  good.value=true
}
const fine = ({ selectedValues }) => {
  rent.value.pay_way=selectedValues.join('')
  good.value=false

}

const columzf=ref(
    [
      // 第一列
      [
        { text: '押一付一', value: '押一付一' },
        { text: '押一付二', value: '押一付二' },
        { text: '押一付三', value: '押一付三' },
        { text: '压零付一', value: '压零付一' },
        { text: '倒贴', value: '倒贴' },
      ],

    ]
)

//选择租金
const showzj=ref(false)
const zj = () => {
  showzj.value=true
}
//选择面积
const showmj=ref(false)
const mj = () => {
  showmj.value=true
}
//x选择户型
//选择楼层
const showhx=ref(false)
const wm = () => {
  showhx.value=true
}
const onhx = ({ selectedValues }) => {
  rent.value.houseType=selectedValues.join('')
  showhx.value=false
}
const columhx=ref(
    [
      // 第一列
      [
        { text: '一室', value: '一室' },
        { text: '二室', value: '二室' },
        { text: '三室', value: '三室' },
        { text: '四室', value: '四室' },
        { text: '五室', value: '五室' },
      ],
      [
        { text: '一厅', value: '一厅' },
        { text: '二厅', value: '二厅' },
        { text: '三厅', value: '三厅' },
        { text: '四厅', value: '四厅' },
      ],
      [
        { text: '一卫', value: '一卫' },
        { text: '二卫', value: '二卫' },
        { text: '三卫', value: '三卫' },
        { text: '四卫', value: '四卫' },
        { text: '五卫', value: '五卫' },
      ],

    ]
)
//选择楼层
const showfo=ref(false)
const jb = () => {
  showfo.value=true
}
const onfl = ({ selectedValues }) => {
  rent.value.floor=selectedValues.join('')
  showfo.value=false
}
const columsf=ref(
    [
      // 第一列
      [
        { text: '一', value: '一楼' },
        { text: '二', value: '二楼' },
        { text: '三', value: '三楼' },
        { text: '四', value: '四楼' },
        { text: '五', value: '五楼' },
      ],

    ]
)

//选择地址
const show=ref(false)
const yhq = () => {
  show.value=true
}
const onConfirm = ({ selectedValues }) => {
  rent.value.address=selectedValues.join('')

  show.value=false
}
const columns = ref(
    [
      {
        text: '浙江',
        value: 'Zhejiang',
        children: [
          {
            text: '杭州',
            value: 'Hangzhou',
            children: [
              { text: '西湖区', value: 'Xihu' },
              { text: '余杭区', value: 'Yuhang' },
            ],
          },
          {
            text: '温州',
            value: 'Wenzhou',
            children: [
              { text: '鹿城区', value: 'Lucheng' },
              { text: '瓯海区', value: 'Ouhai' },
            ],
          },
        ],
      },
      {
        text: '福建',
        value: 'Fujian',
        children: [
          {
            text: '福州',
            value: 'Fuzhou',
            children: [
              { text: '鼓楼区', value: 'Gulou' },
              { text: '台江区', value: 'Taijiang' },
            ],
          },
          {
            text: '厦门',
            value: 'Xiamen',
            children: [
              { text: '思明区', value: 'Siming' },
              { text: '海沧区', value: 'Haicang' },
            ],
          },
        ],
      },
    ]
)

const rent=ref({
  // picture:'',
  // rentalType:'',
  // address:'',
  // f:'',
  // houseStar:'',
  // houseType:'',
  // houseArea:'',
  // houseRent:'',
  // pay_way:''

})
import axios from "axios";
import {ref} from 'vue'
const onClickLeft = () => history.back();
//选类型
const checked2 = ref([]);

const checkboxes=ref([
  { checked: false },
  { checked: false },
  { checked: false },
  { checked: false },
  { checked: false },
  { checked: false },
])
const activeIcon=ref('https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png')
const inactiveIcon =ref('https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png')
const toggleCheckbox = (index) => {
  checked2.value.push(index)
  console.log(checked2)
}

//上传图片
const afterRead = (file) => {
  const formData = new FormData()
  formData.append('file', file.file)
  console.log(formData)
  axios.post("http://39.106.55.36:9099/my/load", formData).then(r => {
    rent.value.picture = r.data.data
    console.log(rent.value)

  })
}

</script>

<style scoped>
.jiji{
  color: #dbd3d3;
  margin-top: 0px;
  margin-left: 153px;
}
.up{
  padding-top: 5px;
  width: 400px;
  height: 33px;
  position: absolute;
  top: 987px;
  left: 15px;
  background-color: #1a1a1a;
}
.checkbox-row {
  display: flex;
  justify-content: space-between; /* 根据需要调整间距 */
}

.checkbox-col {
  /* 根据需要设置列宽和间距 */
  flex: 1;
  text-align: center; /* 使图标居中 */
  margin: 0 15px; /* 设置列之间的间距 */
}

.custom-checkbox-icon {
  width: 35px; /* 图标大小 */
  height: 35px; /* 图标大小 */
}
h3{
  text-align: left;
  margin-bottom: 10px;
}

.picture{
  position: absolute;
  top: 41px;
  left: 17px;
}
.hire{
  position: absolute;
  top: 237px;
  left: 17px;
}
.h11, .h12, .h13{
  width: 112px;
  height: 32px;
  background-color: #efeeee;
}
.h12{
  margin-right: 30px;
  margin-left: 30px;
}
.fu{
  display: flex; /* 使用flex布局来实现横向排列 */
  margin: auto;
}
p{
  margin: auto;
}
.s1, .s2, .s3{
  --van-checkbox-border-color: #efeeee;
  --van-checkbox-size: 32px;
}
.light{
  position: absolute;
  top: 330px;
  left: 17px;
}
.two{
  margin-top: 13px;
  left: 17px;
}
.mes{
  position: absolute;
  top: 466px;
  left: 1px;
  right: 17px;
  width: auto;
  height: 600px;
}
.custom-cell{
  height: 51px;
  margin-bottom: 3px;
  text-align: left !important;
}
.h33{
  margin-left: 17px;
}

.tao{
  position: absolute;
  top: 829px;
  left: 17px;
}
p{
  color: #818181;
}
</style>
